<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>管理中心</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.cookie.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.mobile-1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
	jQuery(function($){
		$.ajax({
			  type: 'GET',
			  url: 'getMicros',
			  async: false,//是否异步
			  contentType: "application/json; charset=utf-8"
			  ,success: function(d){
				  if(d.micros == null){
					  $('#micros').html("<p>"+d.msg+"</p>");
				  }else{
					  $.each(d.micros, function(i, n){
						var html = "<div data-role='content'>"
						    	+"<ul data-role='listview'>"
					    		+"<li data-role='list-divider'>"+n.name+"</li>"
					      		+"<li><a  href='#' onclick=\"window.parent.location.href=\'"+n.url+"\'\"> <img src='<%=request.getContextPath()%>/img/service.png\'>"
								+"	<h3>"+n.title+"</h3>"
								+"	<p>"+n.context+"</p></a>"
								+"	<a  href='#' onclick=\"window.parent.location.href=\'"+n.url+"\'\" data-rel='dialog' data-transition='pop'>使用</a></li>"
					    		+"</ul>"
					     		+"</div><br/><br/>";
						 $(html).appendTo('#micros').trigger('create');
						});
				  }
			  }
			  ,error:function(d){
				  //TODO something
				  $('#micros').html("<span style='color:red'>"+d.msg+"</span>");
			  }
		});
	});
</script>
</head>
<body>
<div data-role="page">
	<div data-role="header" data-theme="b">
	  <h1>系统服务中心（MICROS）</h1>
	</div>
	<div data-role="content">
     <div data-role="content" style="text-align: center;">
     <img alt="" src="../img/services.jpg" 
     	  style="max-width: 100%; max-height: 100%;"></div>
     <div data-role="main" id="micros" style="padding-bottom: 20px"></div>
  </div>
</div> 
</body>
</html>